<template>
  <div class="banner">
    <el-col :span="24" class="action-bar">
      <!-- <span style="color:#888888;">轮播图管理:</span> -->
      <el-select style="margin-left: 10px" @clear="merchantSelectClear" @change="merchantChange" clearable v-model="merchantId" placeholder="所属门店">
        <el-option v-for="item in merchantList" :key="item.id" :value="item.id" :label="item.name" />
      </el-select>
      <el-button type="primary" size="medium" @click="addBtnReset" style="margin: 0 20px;">新增</el-button>
    </el-col>

    <!--列表-->
    <el-table stripe :data="bannerList"v-loading="tableLoadingShow"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              style="width: 100%"
              element-loading-text="加载中" highlight-current-row class="el-table-style">
      <!--<el-table-column type="selection" min-width="55">
      </el-table-column>-->
      <el-table-column prop="id" label="序号" min-width="60">
      </el-table-column>
      <el-table-column label="图片" min-width="100">
        <template slot-scope="scope">
          <img :src="scope.row.img_url" style="object-fit:contain" width="80" height="80"/>
        </template>
      </el-table-column>
      <el-table-column prop="title" width="200" style="text-align: center" label="标题" min-width="100"></el-table-column>
      <el-table-column prop="merchant_name" width="200" style="text-align: center" label="所属门店" min-width="100" sortable></el-table-column>
      <!--<el-table-column prop="link_url" label="链接" min-width="100" sortable>
        <template slot-scope="scope">
          <div>
            <el-button type="primary"
                       v-clipboard:copy="scope.row.link_url"
                       v-clipboard:success="onCopy"
                       size="mini"
                       v-clipboard:error="onError">复制链接</el-button>
          </div>
        </template>
      </el-table-column>-->
      <el-table-column prop="sort" label="排序" min-width="100" sortable>
      </el-table-column>
      <el-table-column label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="getButtonDetail(scope.row.id,scope.row.merchant_id)">编辑</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="delButton(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <!-- <div class="batch"><el-button size="medium ">批量删除</el-button></div> -->
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pageTotal"
          :page-size="limit"
          :current-page="page"
          @current-change="getButtonList"
        >
        </el-pagination>
      </div>
    </el-col>

    <!-- 新增 -->
    <el-dialog :title="addForm.id?'修改功能按钮':'新增功能按钮'" :visible.sync="addFormVisible" width="40%">
      <el-form label-width="80px">
        <el-form-item label="门店">
          <el-select v-model="addForm.merchant_id" placeholder="选择门店" @change="chooseMerchantByAdd(addForm.merchant_id)">
            <el-option v-for="opt in merchantList" :key="opt.id" :value="opt.id" :label="opt.name" />
          </el-select>
        </el-form-item>
        <!--<el-form-item label="分类">
          <el-select v-model="addForm.classify_id" placeholder="选择分类">
            <el-option v-for="opt in classifyList" :key="opt.id" :value="opt.id" :label="opt.name" />
          </el-select>
        </el-form-item>-->
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            name="photo"
            :action="$api.UPLOAD_IMG"
            :show-file-list="false"
            :on-success="addUploadSuccess"
          >
            <img v-if="addForm.imgUrl" :src="addForm.imgUrl" class="avatar">
            <div v-else style="display: flex;align-items: center;flex-direction: column;font-size: 11px;color: grey;line-height: 15px;padding-bottom: 10px" >
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <span>建议宽高比例为1:1</span>
              <span>文件大小<2Mb</span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="addForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-col :span="24">
            <el-radio-group v-model="radioFlag">
              <el-radio :label="1">商品分类</el-radio>
              <el-radio :label="2">外部网页链接/小程序跳转</el-radio>
            </el-radio-group>
          </el-col>
          <el-input v-if="radioFlag!=1" v-model="addForm.linkUrl" auto-complete="off" placeholder="请输入网页链接或appid"></el-input>
          <div v-else>
            <!--<el-select v-model="addForm.classify_id" placeholder="选择分类">
              <el-option v-for="opt in classifyList" :key="opt.id" :value="opt.id" :label="opt.name" />
            </el-select>-->
            <el-select v-model="classify_first_id" :placeholder="addForm.merchant_id?'选择分类':'请先选择店铺'" clearable @clear="firstClassifySelectClear">
              <el-option v-for="opt in classifyList" :key="opt.id" :value="opt.id" :label="opt.name" />
            </el-select>

            <el-select clearable @clear="secondClassifySelectClear" style="margin-left: 8px" v-if="classifyListSecond.length>0" v-model="classify_second_id" placeholder="选择二级分类" >
              <el-option v-for="opt in classifyListSecond" :key="opt.id" :value="opt.id" :label="opt.name" />
            </el-select>
          </div>
          <div class="tip">
            <!--<p>1、商品列表</p>-->
            <!--<p v-if="radioFlag==2">1、外部网页链接（需要提前在<el-button type="text" @click="openWxUrl">小程序管理后台</el-button>添加业务域名）</p>-->
            <p v-if="radioFlag==2">1、外部网页链接（需联系第三方平台配置业务域名）</p>
            <p v-if="radioFlag==2">2、小程序跳转（输入appid）</p>
          </div>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="number" v-model="addForm.sort" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addCancelBtn">取消</el-button>
        <el-button type="primary" @click="addSubmitBtn">提交</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <!--<el-dialog title="编辑功能按钮" :visible.sync="editFormVisible" width="40%">
      <el-form label-width="80px">
        <el-form-item label="门店">
          <el-select v-model="editForm.merchant_id" placeholder="选择门店" @change="chooseMerchantByEdit(editForm.merchant_id)">
            <el-option v-for="opt in merchantList" :key="opt.id" :value="opt.id" :label="opt.name" />
          </el-select>
        </el-form-item>
        &lt;!&ndash;<el-form-item label="分类">
          <el-select v-model="editForm.classify_id" placeholder="选择分类"  @change="chooseClassifyByEdit(editForm.classify_id)">
            <el-option v-for="opt in classifyList" :key="opt.id" :value="opt.id" :label="opt.name" />
          </el-select>
        </el-form-item>&ndash;&gt;

        <el-form-item label="标题">
          <el-input v-model="editForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-col :span="24">
            <el-radio-group v-model="radioFlag">
              <el-radio :label="1">商品分类</el-radio>
              <el-radio :label="2">外部网页链接/小程序跳转</el-radio>
            </el-radio-group>
          </el-col>
          <el-input v-if="radioFlag!=1" v-model="editForm.linkUrl" auto-complete="off"  placeholder="请输入网页链接或appid"></el-input>
          <el-select v-else v-model="editForm.classify_id" placeholder="选择分类">
            <el-option v-for="opt in classifyList" :key="opt.id" :value="opt.id" :label="opt.name" />
          </el-select>
          <div class="tip">
            &lt;!&ndash;<p>1、商品列表</p>&ndash;&gt;
            <p v-if="radioFlag==2">1、外部网页链接（需联系第三方平台配置业务域名）</p>
            <p v-if="radioFlag==2">2、小程序跳转（输入appid）</p>
          </div>
        </el-form-item>
        <el-form-item label="排序">
          <el-input type="number" v-model="editForm.sort" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editCancelBtn">取消</el-button>
        <el-button type="primary" @click="editSubmitBtn">提交</el-button>
      </div>
    </el-dialog>-->
  </div>
</template>

<script>
  export default {
    data(){
      return{
        merchantId: '',
        tableLoadingShow: false,
        addFormVisible: false,//新增界面是否显示
        editFormVisible: false,//编辑界面是否显示
        addImageUrl:'',
        pageTotal:0,
        page: 1,
        limit:6,
        classify_first_id: '',
        classify_second_id: '',
        //新增界面数据
        addForm: {
          id: '',
          merchant_id: '',
          merchantName: '',
          classify_id: '',
          title: '',
          imgId:'',
          linkUrl:'',
          imgUrl:'',
          sort: '',
        },
        //编辑界面数据
        /*editForm: {
          merchant_id: '',
          classify_id: '',
          id:'',
          title: '',
          imgId:'',
          linkUrl:'',
          imgUrl:'',
          sort: '',
        },*/
        bannerList:[],
        merchant: '',
        merchantList: [],
        classifyList: [],
        classifyListSecond: [],
        radioFlag: 1
      }
    },
    mounted(){
      this.getUserInfo();
      this.getMerchantList()
    },
    watch: {
      'classify_first_id': function (newVal,oldVal) {
          this.classify_second_id = ''
          this.classifyListSecond = []
          this.getGoodsClassifyList(this.addForm.merchant_id,newVal)
      },
      /*'addForm.merchant_id': function (newVal,oldVal) {

      }*/
    },
    methods:{
      onCopy(e){
        this.$message({
          type:'success',
          message:'复制成功'
        })
      },
      onError(erro){
        this.$message({
          type:'error',
          message:'复制失败'
        })
      },
      //新增上传图片成功回调
      addUploadSuccess(res, file) {
        if(res.data){
          this.addForm.imgUrl = res.data.img_url;
          this.addForm.imgId = res.data.id;
        }
      },
      //编辑上传图片成功回调
      /*editUploadSuccess(res, file) {
        if(res.data){
          this.editForm.imgUrl = res.data.img_url;
          this.editForm.imgId = res.data.id;
        }
      },*/
      //新增取消按钮
      addCancelBtn(){
        this.addForm.img = "";
        this.addForm.sort = "";
        this.addFormVisible = false;
        this.radioFlag = 1
      },
      //编辑取消按钮
      /*editCancelBtn(){
        this.editForm.id = "";
        this.editForm.title = "";
        this.editForm.img = "";
        this.editForm.sort = "";
        this.editFormVisible = false;
        this.editForm.imgUrl = '';
      },*/
      //新增按钮重置表单
      addBtnReset(){
        this.classify_second_id = ''
        this.classify_first_id = ''
        this.classifyListSecond = []
        this.classifyList = []
        this.addForm.id = ''
        this.addForm.classify_id = "";
        this.addForm.merchant_id = "";
        this.addForm.title = "";
        this.addForm.img = "";
        this.addForm.sort = "";
        this.addForm.imgUrl = "";
        this.addForm.linkUrl = "";
        this.addFormVisible = true;
        this.radioFlag = 1
      },
      //获取轮播图列表
      async getButtonList(page){
        this.tableLoadingShow = true
        this.page = page || this.page
        let params = {
          limit:this.limit,
          page:this.page,
          merchant_id: this.merchantId
        }
        const res = await this.$api.getButtonList(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          this.bannerList = list;
          this.pageTotal = res.data.page_info.total
        }else{
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
        this.tableLoadingShow = false
      },

      //获取门店列表
      async getMerchantList(){
        this.page = this.page
        let params = {
          limit:999,
          page:1
        }
        const res = await this.$api.getMerchantList(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          this.merchantList = list;
        }else {
            this.$message.error(res.data.message)
          }
      },
      //获取门店的分类
      async getGoodsClassifyList(id,pid){
        if(!id){
          this.classifyList = []
          return ;
        }
        this.page = this.page
        let params = {
          limit:999,
          page:1,
          merchant_id: id,
          pid: pid
        }
        const res = await this.$api.getGoodsClassifyList(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          let tempObj = {
            name: '不选择',
            id: 0
          }
          if(pid){
            /*list.unshift(tempObj)*/
            this.classifyListSecond = list;
          } else{
            list.unshift(tempObj)
            this.classifyList = list;
          }
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },
      //选择门店
      /*chooseMerchantByEdit(id,status) {
        this.editForm.classify_id = '';
        this.classify_first_id = '';
        this.classify_second_id = '';
        this.getGoodsClassifyList(id)
      },*/
      chooseMerchantByAdd(id,status) {
        this.addForm.classify_id = '';
        this.classify_first_id = '';
        this.classify_second_id = '';
        this.classifyList = [];
        this.classifyListSecond = [];
        this.getGoodsClassifyList(id)
      },
      /*chooseClassifyByEdit(id) {
        this.editForm.classify_id = id;
      },*/
      //编辑获取功能按钮信息
      async getButtonDetail(id,merchant_id){
        await this.getGoodsClassifyList(merchant_id)
        const params = {
          id: id
        }
        const res = await this.$api.getButtonDetail(params);
        if(res.data.level=='success'){
          /*this.editForm.id = res.data.data.id;
          this.editForm.title = res.data.data.title;
          this.editForm.classify_id = parseInt(res.data.data.classify_id);
          this.editForm.merchant_id = parseInt(res.data.data.merchant_id);
          this.editForm.imgUrl = res.data.data.img_url;
          this.editForm.linkUrl = res.data.data.link_url;
          this.editForm.imgId = res.data.data.img_id;
          this.editForm.sort = res.data.data.sort;
          this.editFormVisible = true;
          if(this.editForm.linkUrl){
            this.radioFlag = 2
          } else{
            this.radioFlag = 1
          }*/
          this.addForm.id = res.data.data.id;
          this.addForm.title = res.data.data.title;

          if(res.data.data.parent_classify_id!=0){
            this.classify_first_id = res.data.data.parent_classify_id
            this.classify_second_id = parseInt(res.data.data.classify_id);
          } else{
            this.classify_first_id = parseInt(res.data.data.classify_id)
            this.classify_second_id = ''
          }


          this.addForm.merchant_id = parseInt(res.data.data.merchant_id);
          this.addForm.imgUrl = res.data.data.img_url;
          this.addForm.linkUrl = res.data.data.link_url;
          this.addForm.imgId = res.data.data.img_id;
          this.addForm.sort = res.data.data.sort;
          this.addFormVisible = true;
          if(this.addForm.linkUrl){
            this.radioFlag = 2
          } else{
            this.radioFlag = 1
          }
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },
      //编辑提交按钮
      /*async editSubmitBtn(){
        const params = {
          id:this.editForm.id,
          title:  this.editForm.title,
          img_id:this.editForm.imgId,
          link_url: this.radioFlag==1?'':this.editForm.linkUrl,
          sort:this.editForm.sort,
          merchant_id: this.editForm.merchant_id,
          classify_id: this.editForm.classify_id
        }
        const res = await this.$api.setButton(params);
        if(res.data.level=='success'){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.editCancelBtn();
          this.getButtonList();
          this.editForm.imgUrl = '';
        }else{
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
      },*/
      //新增提交按钮
      async addSubmitBtn(){
        const params = {
          id: this.addForm.id,
          title:  this.addForm.title,
          img_id:this.addForm.imgId,
          link_url: this.radioFlag==1?'':this.addForm.linkUrl,
          sort:this.addForm.sort,
          merchant_id: this.addForm.merchant_id,
          classify_id: this.classify_second_id?this.classify_second_id:this.classify_first_id
        }
        const res = await this.$api.setButton(params);
        if(res.data.level=='success'){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.addCancelBtn();
          this.getButtonList();
        }else{
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
      },
      //删除轮播图
      async delButton(id){
        const params = {
          id:id,
        }
        //删除
        const judge= this.$confirm('删除该项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res = await this.$api.delButton(params)
          if(res.data.level=='success'){
            this.getButtonList();
            this.$message({
              type: 'success',
              message: res.data.message
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        }).catch(() => {
        });
      },
      async getUserInfo() {
        const res = await this.$api.getMerchantUserInfo();
        if (res.data.level == 'success') {
          this.merchant = res.data.data
          this.getButtonList();
        } else {
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
      },

      openWxUrl() {
        open('https://mp.weixin.qq.com/')
      },

      //获取门店的分类
      /*async getGoodsClassifyList(id){
        if(!id){
          this.classifyList = []
          return ;
        }
        this.page = this.page
        let params = {
          limit:99,
          page:1,
          merchant_id: id
        }
        const res = await this.$api.getGoodsClassifyList(params);
        if(res.data.level=='success'){
          let list = res.data.data;
          this.classifyList = list;
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },*/

      //下拉框选择事件
      merchantSelectClear() {
        this.page = 1
        this.getButtonList();
      },

      merchantChange() {
        this.page = 1
        this.getButtonList();
      },

      firstClassifySelectClear() {
        this.classify_first_id = ''
        this.classify_second_id = ''
        this.classifyListSecond = []
      },

      secondClassifySelectClear() {
        this.classify_second_id = ''
      }

    }
  }
</script>
<style lang='scss' scoped>
  .tip{
    p{
      font-size: 14px;
      padding: 0;
      margin: 0;
      line-height: 30px;
    }
  }
  .banner{
    padding: 10px 30px;
    .action-bar{
      background-color: #f2f2f2;
      height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: 20px;
      .action-bar-input{
        width: 250px;
        margin-right: 14px;
      }
    }
    .el-table-style{
      width: 100%;
      border: 1px solid #f2f2f2;
    }
    .footer-bar{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
    }
    .dialog-footer{
      text-align: center;
    }
  }
</style>

<style>
  .el-pagination.is-background .el-pager li,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next
  {
    background-color: #fff;
    border: 1px solid #f1f1f1;
    margin: 0;
  }
  .member .el-dialog__body{overflow: auto;}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
</style>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 128px;
    line-height: 138px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
